<template>
    <div class="title">个人中心</div>
    <div class="content">
        <p>管理员ID:{{ Data.id }}</p>
        <hr>
        <p>账号:{{ accountInfo }}</p>
        <hr>
        <p>用户组:{{ userGroupdata }}</p>
        <hr>
        <p>创建时间:{{ ctimedata }}</p>
        <hr>
        <p>管理员头像</p>
        <el-upload
            :action="'http://8.137.157.16:9002/users/avatar_upload?id=' + Data.id"
            :show-file-list="false"
            :on-success="handleUploadSuccess"
            :on-error="handleUploadError"
            @change="handleFileChange"
            :before-upload="beforeAvatarUpload"
        >
            <img v-if="formData.img" :src="formData.img" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
    </div>
</template>

<script setup>
import { ref } from 'vue';
// 确保导入 imgupload 函数
import { getAccountInfo } from '../../api/account';
import { serveUrl } from '../../utils/common';
import { Plus } from '@element-plus/icons-vue';
import { useUserStore } from '../../stores/userstores';
import { ElMessage } from 'element-plus';

const userStore = useUserStore();
const Data = {
    id: JSON.parse(sessionStorage.getItem('id')),
};
console.log(Data.id);

const ctimedata = ref('');
const accountInfo = ref('');
const imgdata = ref('');
const userGroupdata = ref('');

const selectedFile = ref(null);

const formData = ref({ img: '' });

const getAccountData = async () => {
    const res = await getAccountInfo(Data);
    console.log(res);
    accountInfo.value = res.accountInfo.account;
    imgdata.value = serveUrl + res.accountInfo.imgUrl;
    ctimedata.value = res.accountInfo.ctime.slice(0, 10);
    userGroupdata.value = res.accountInfo.userGroup;
    // 更新formData的img属性
    formData.value.img = imgdata.value;
};
const beforeAvatarUpload = (file) => {
    const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'|| file.type === 'image/jpg'|| file.type === 'image/gif';
    const isLt2M = file.size / 1024 / 1024 < 2;

    if (!isJPG) {
        ElMessage.error('上传头像图片只能是 JPG/PNG/JPEG/GIF 格式!');
    } else if (!isLt2M) {
        ElMessage.error('上传头像图片大小不能超过 2MB!');
    }
    return isJPG && isLt2M;
}

const handleFileChange = (e) => {
    // 从el-upload的change事件参数中获取文件对象
    const files = e.file;
    if (files) {
        selectedFile.value = files;
    }
};

const handleUploadError = (err) => {
    console.error('图片上传错误:', err);
    // 重置文件对象
    selectedFile.value = null;
};

const handleUploadSuccess = async (response, file, fileList) => {
    console.log('handleUploadSuccess 方法被调用，上传成功的响应:', response);
    if (response.code === 0) {
        // 重新获取个人中心信息
        await getAccountData();
        userStore.changeuserInfostate(); // 更新用户信息
    }
    // 重置文件对象
    selectedFile.value = null;
};

getAccountData();
</script>

<style lang="scss" scoped>
.title {
    width: 100%;
    height: 50px;
    font-size: 20px;
    color: #333;
    line-height: 50px;
    padding-left: 20px;
    text-align: left;
    border-bottom: 1px solid #dcdfe6;
}

.content {
    width: auto;
    height: 330px;
    padding: 15px;
}

p {
    text-align: left;
    font-size: 16px;
    color: #000000;
    line-height: 16px;
}

hr {
    display: block;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    margin-inline-start: auto;
    margin-inline-end: auto;
    unicode-bidi: isolate;
    overflow: hidden;
    border-style: inset;
    border-width: 1px;
}

img {
    width: 178px;
    height: 178px;
    border: 1px solid #dcdfe6;
    cursor: pointer;
}
.avatar-uploader.avatar {
    width: 180px;
    height: 180px;
    display: block;
    border: 1px dashed var(--el-border-color);
}

.avatar-uploader.el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader.el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
}

.avatar-uploader {
    width: 180px;
    height: 180px;
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
    text-align: center;
    line-height: 180px;
    font-size: 28px;
    color: #8c939d;
}
</style>    